<script setup lang="ts">
import {PropType} from "vue";
import {newAlbumListInterface} from "@/components/show_item/panbox/PanBox.vue";

defineProps({
  showMessage: {
    type: [Object, Number] as PropType<newAlbumListInterface>,
    required: true,
  },
});
</script>
<template>
  <div class="m_container">
    <img v-lazy="{src:showMessage.picUrl}" alt="加载中">
    <span class="name">{{ showMessage.name }}</span>
    <p class="company">{{ showMessage.company }}</p>
  </div>
</template>
<style scoped lang="scss">
.m_container {
  width: 100px;
  height: 140px;
  float: left;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 20px;

  img {
    height: 100px;
    width: 100px;
  }

  .name {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .company {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style>
